<template>
  <el-dialog
    v-dialogDrag
    v-loading="loading"
    append-to-body
    top="6vh"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="true"
    :type="type"
    :title="title"
    :visible.sync="isVisible"
  >
    <el-form
      ref="dataForm"
      size="mini"
      :model="dataForm"
      :rules="dataRule"
      label-width="150px"
      @keyup.enter.native="dataFormSubmit()"
    >
      <el-card
        style="margin-bottom:5px;"
        shadow="hover"
      >
        <div
          slot="header"
          class="clearfix cardHeader"
        >
          <span><i class="el-icon-star-on" />基本信息</span>
        </div>
        <el-row
          type="flex"
          class="row-bg"
        >
          <el-col :span="24">
            <el-form-item
              label="项目名称"
              prop="projectName"
            >
              <el-input
                v-model="dataForm.projectName"
                clearable
                placeholder="项目名称"
                maxlength="50"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          class="row-bg"
        >
          <el-col :span="24">
            <el-form-item
              label="类型"
              prop="type"
            > 
              <el-radio-group v-model="dataForm.type" @change="typeChange">
                <el-radio :label="1">免责声明</el-radio>
                <el-radio :label="2">运动注意事项</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row
          type="flex"
          class="row-bg"
        >
          <el-col :span="24">
            <el-form-item
              :label="exceptionsInstructionsName"
              prop="exceptionsInstructions"
            >
              <el-input
                v-model="dataForm.exceptionsInstructions"
                placeholder=""
                type="textarea"
                maxlength="4294967295"
                show-word-limit
                :autosize="{ minRows: 10, maxRows: 50}"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        size="small"
        @click="isVisible = false"
      >取消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        @click="submitForm()"
      >确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import '@/utils/directives.js'
  import { getScreenWidth } from '@/utils'
  export default {
    components: {  },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'add'
      }
    },
    data () {
      return {
        dataForm: this.initDataForm(),
        loading: false,
        width: getScreenWidth(),
        dataRule: {
        }
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
          this.reset()
        }
      },
      title() {
        return this.$t('common.' + this.type)
      },
      exceptionsInstructionsName() {
        if(this.dataForm && this.dataForm.type == 1) {
          return '免责声明';
        }
        if(this.dataForm && this.dataForm.type == 2) {
          return '运动注意事项';
        }
        return '免责声明';
      }
    },
    watch: {},
    mounted () {
      window.onresize = () => {
        return (() => {
          this.width = getScreenWidth()
        })()
      }
    },
    methods: {
      initDataForm() {
        return {
          id: '',
          type: 1,
          projectName: '',
          exceptionsInstructions: ''
        }
      },
      setDataForm(val) {
        if (val) {
          this.dataForm = { ...val }
        }
      },
      close() {
        this.$emit('close')
      },
      reset() {
        // 先清除校验，再清除表单
        this.$refs.dataForm.clearValidate()
        this.$refs.dataForm.resetFields()
        this.dataForm = this.initDataForm()
      },
      submitForm() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            if (this.type === 'update') {
              this.update()
            } else {
              this.save()
            }
          } else {
            return false
          }
        })
      },
      save() {
        this.loading = true
        this.$http({
          url: this.$http.requestUrl(`/sport/prescriptionexceptions/save`),
          method: 'post',
          data: this.$http.requestData(this.dataForm)
        }).then(response => {
          const res = response.data
          if (res && res.code === 0) {
            this.isVisible = false
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$emit('success')
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
        })
      },
      update() {
        this.loading = true
        this.$http({
          url: this.$http.requestUrl(`/sport/prescriptionexceptions/update`),
          method: 'post',
          data: this.$http.requestData(this.dataForm)
        }).then(response => {
          const res = response.data
          if (res && res.code === 0) {
            this.isVisible = false
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.$emit('success')
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
        })
      },
      typeChange(type) {
      }
    }
  }
</script>